[세션레포트] What's new in AWS for frontend developers #AWSreInvent #FWM311

안녕하세요. 클래스메소드의 정하은입니다.

이번 글에서는 AWS re:Invent 2024 에서 "프론트엔드 개발자를 위한 AWS의 새로운 기능" 을 주제로 한 세션을 듣고 온 레포트를 작성하고자 합니다.

본 세션은 프론트엔드 개발자가 풀스택 앱을 개발하기 위해 사용할 수 있는 AWS 서비스들에 대한 내용을 다루고 있었습니다.

실제로는 자동차 경매 사이트 구축 과정을 예시로 새 기능 사용법에 대해서도 해설하였지만 이 글에서는 각 서비스 개요에 대해서만 정리한 부분 양해 부탁드려요.

AWS Amplify를 통해 프론트엔드 웹 및 모바일 개발자는 최소한의 클라우드 전문 지식으로 몇 시간 만에 풀스택 애플리케이션을 쉽게 구축할 수 있습니다. 이 세션에서는 인증, 데이터 및 스토리지로 백엔드를 쉽게 구성하는 방법, 프론트엔드 UI를 만드는 방법, Next.js로 서버 측 렌더링 웹 앱을 호스팅하는 방법 등 Amplify의 기능을 살펴봅니다. 개발자와 팀이 혁신의 속도를 더욱 쉽게 높이고, 데이터를 활용하여 차별화된 애플리케이션 경험을 구축하며, 개별 엔지니어에게 가상 팀의 힘을 부여할 수 있는 흥미로운 새로운 기능에 대해 알아보세요.

세션 영상은 유튜브에 공개 되어 있으니 참고 바랍니다.

세션 내용

개발자의 요구 및 동향

사용자들은 앱을 이용할 때 아래의 요소들을 요구합니다.

• 빠른 속도
• 사용자 경험 (실시간 업데이트)
• 지능형 기능 (인사이트, 빠른 UX 워크플로)
• 크로스 디바이스
• 신뢰성 (인증, 정보 보안)

프론트엔드 개발은 풀스택 개발로 변화하고 있습니다.

• 지속적인 서버리스 혁신
  • Lambda 뿐만 아니라 Amazon Bedrock과 같은 실시간, 생성형 AI 서비스의 등장
• 자바스크립트 측면의 혁신
  • React, Vue 와 같은 프론트엔드 프레임워크의 풀스택 프레임워크화
  • React 네이티브를 모바일에서도 재사용 가능
  • Amazon Q Developer와 같은 생성형 AI 서비스 등장
• 프론트엔드와 백엔드, DevOps 팀 사이의 장벽을 허문 협업, CI/CD 제공
• 모니터링

앞서 언급한 내용을 실현하기 위해 풀스택 개발에 사용되는 AWS 서비스들은 위와 같습니다.

Amazon Q, AWS Amplify, AWS App Sync 등의 소개

Amazon Q Developer에서 프로젝트 내에서 읽기 파일과 데이터 흐름 다이어그램을 자동으로 생성하여 코드를 문서화 할 수 있게 되었다는 소식이 AWS re:Invent 2024에서 새로 발표되었습니다.

이 기능은 새로운 채팅 명령을 통해 통합 개발 환경(IDE)에서 사용할 수 있으며, Visual Studio Code 및 IntelliJ IDEA IDE에서 문서 생성을 시작할 수 있습니다.

AWS Amplify Gen 2는 TypeScript로 백엔드 전체를 구축할 수 있습니다. AWS CDK를 기반으로 Amplify에서 기본적으로 제공하지 않는 서비스들도 추가가 가능합니다.

Gen 2는 팀을 위해 제작되었기 때문에 개발자별 샌드박스가 있습니다. 따라서 팀의 모든 개발자는 서로 독립적으로 반복할 수 있습니다. 코드를 공유할 준비가 되면 커밋하고 브랜치를 스테이징하고 프론트엔드와 백엔드에 대한 업데이트를 모든 GIT push로 배포하기만 하면 된다고 합니다. 백엔드, 프론트엔드 코드를 TypeScript로 생성할 수 있기 때문에 Amazon Q와 같은 AI 시스템에도 적합하다고 해요.

지난달 출시된 Amplify AI Kit를 사용하여 AI 기능을 추가하는 것이 가능합니다.

동일한 유형의 스크립트 기반의 경험을 AI에 적용하여 AI 기반 경험을 빠르게 구축할 수 있으며, 데이터에 안전하게 액세스할 수 있는 LLM을 쉽게 제공할 수 있습니다.

채팅 및 대화형 검색 UI 구축이 간소화 되고, 요약이나 이미지 생성과 같은 One-shot 생성 방식이 추가되었으며, LLM이 외부 API를 호출할 수 있는 내장 도구를 지원해준다고 해요.

Amazon Q와 Amplify Backend 에 새로 추가된 기능들도 소개되었습니다.

AWS AppSync Events도 새로 출시되는데요. AppSync Events는 서버리스 웹소켓 형식으로 제공된다고 합니다.

웹소켓 형식으로 통신하기에 거의 실시간에 가까운 경험이 가능하며, 운영 오버헤드가 감소합니다.

또한, 폴링 방식과 비교했을 때 훨씬 빠르고 전체 비용을 절감할 수 있다고해요.

새로 나온 기능은 아니지만 CloudWatch를 이용한 앱 모니터링 방법도 소개되었는데요.

AWS Amplify 가 CDK를 기반으로 하고 있기 때문에 CloudWatch RUM 앱 모니터 생성이 가능합니다. Amazon Cognito 자격 증명 풀을 이용하면 CloudWatch RUM에 데이터를 전송할 수 있다고 합니다.

또한, CloudWatch RUM은 AWS X-Ray와 통합되어 있기때문에 전체 스택 추적도 가능합니다. AppSync, DynamoDB와 같은 백엔드의 상호작용을 하나의 단일 뷰로 볼 수도 있구요.

CloudWatch RUM과 CloudWatch Synthetics의 업데이트 사항도 소개되었습니다.

최종 아키텍처

마지막으로 자동차 경매 사이트 구축 아키텍처에 대하여 훑어보았습니다.

마무리

지난번에 세션레포트로 작성했던 FWM205 세션과 결은 비슷했지만 이 세션에서는 각 기능의 사용법에 더 중점을 두어 설명한 세션이라 AWS Amplify에 대해 더 상세하게 파고 들 수 있는 시간이 되었던 것 같습니다.

AWS Amplify Gen2가 AWS CDK를 베이스로 하다보니 타서비스에 확장하기 편해졌다는 점, 최근 AWS에서 강력히 푸시하고 있는 생성형 AI를 활용할 수 있다는 점이 매력적으로 다가왔어요.

앞으로 추가될 AWS Amplify의 새로운 기능들도 더욱 기대가 되는 세션이었습니다!